﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Visifire Test Page</title>
        <script type="text/javascript" src="../Visifire.js"></script>
    <style type="text/css">
        #VisifireChart0
        {
            height: 450px;
            width: 500px;
        }
    </style>
    
</head>
    
<body style="background-color:Gray;">
    
    <div id="VisifireChart0">
        <script type="text/javascript">

            var chartXml = '<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" Theme="Theme1" AnimationEnabled="True" Bevel="True" BorderThickness="2" BorderBrush="Black" View3D="False">'
                           + '     <vc:Chart.Titles>'
                           + '         <vc:Title Enabled="False" Text="Athens 2004 Olympics" FontSize="14"/>'
                           + '     </vc:Chart.Titles>'

                           + '     <vc:Chart.ToolTips>'
                           + '         <vc:ToolTip FontSize="8" Background="AliceBlue"/>'
                           + '     </vc:Chart.ToolTips>'

                           + '     <vc:Chart.AxesX>'
                           + '         <vc:Axis Title="Country"/>'
                           + '     </vc:Chart.AxesX>'

                           + '     <vc:Chart.AxesY>'
                           + '         <vc:Axis Title="Gold Medals Won"/>'
                           + '    </vc:Chart.AxesY>'

                           + '     <vc:Chart.PlotArea>'
                           + '         <vc:PlotArea Background="LightGray"/>'
                           + '     </vc:Chart.PlotArea>'

                           + '     <vc:Chart.Series>'
                           + '         <vc:DataSeries RenderAs="Column" LabelEnabled="True">'
                           + '             <vc:DataSeries.DataPoints>'
                           + '                 <vc:DataPoint AxisXLabel="USA" YValue="35"/>'
                           + '                 <vc:DataPoint AxisXLabel="China" YValue="32"/>'
                           + '                 <vc:DataPoint AxisXLabel="Russia" YValue="27"/>'
                           + '                 <vc:DataPoint AxisXLabel="Australia" YValue="17"/>'
                           + '                 <vc:DataPoint AxisXLabel="Japan" YValue="16"/>'
                           + '             </vc:DataSeries.DataPoints>'
                           + '         </vc:DataSeries>'
                           + '     </vc:Chart.Series>'
                           + ' </vc:Chart>';
                           
            // Create Visifire object
            var vChart = new Visifire('../ClientBin/SL.Visifire.Charts.xap', "MyChart", 500, 300);
            vChart.setDataXml(chartXml);
            vChart.preLoad = function(args) {
                var chart = args[0];   // Chart Reference.

                chart.Series[0].MouseLeftButtonUp = OnMouseLeftButtonUp;
            };
            // Render chart
            vChart.render("VisifireChart0");


            function OnMouseLeftButtonUp(e) {
                vChart.setDataXml(chartXml);
                vChart.render("VisifireChart0");
            };
            
            
        </script>
    </div>
    
</body>

</html>
